<template>
  <div class="search-list">
    <Header></Header>
    <ul>
      <li v-for="name, index of searchConditionList" :key="index" @click="handleSearchCondition(index)">
        <span :class="{ active: currentSearchCondition.index == index }">{{ name }}</span>

        <div v-if="index != 0" class='search-filter'>
          <i class='iconfont icon-arrow_up_fat'
            :class="{ active: currentSearchCondition.arrow == 'asc' && currentSearchCondition.index == index }" />
          <i class='iconfont icon-arrow_down_fat'
            :class="{ active: currentSearchCondition.arrow == 'desc' && currentSearchCondition.index == index }" />
        </div>

      </li>
    </ul>
    <section ref="section">

      <ul v-if="goods.length">
        <li v-for="good, index of goods" :key="index" @click="router.push({ path: '/detail', query: { id: good.id } })">
          <img v-lazy="this.baseUrl + good.img_url">
          <h3>{{ good.name }}</h3>
          <div class='price'>
            <span>¥{{ good.price }}</span>
            <a href="#">立即购买</a>
          </div>
        </li>
      </ul>
      <h1 v-else>暂无数据...</h1>

    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from './Header.vue'
import Tabbar from '@/components/common/Tabbar'
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'
import { reactive, ref, onMounted, watchEffect, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { get_goods_search } from '@/api/goodsApi.js'

const router = useRouter()
const route = useRoute()

//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(section.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
})

//获取商品数据
let goods = ref([])
const getGoods = async () => {
  goods.value = await get_goods_search(
    route.query.searchName, 
    route.query.order, 
    route.query.orderName
  )

  console.log(goods.value)
}
watchEffect(getGoods)

//处理搜索条件
const currentSearchCondition = reactive({ index: 0, arrow: 'asc' })
const searchConditionList = reactive(['综合', '价格', '销量'])

const handleSearchCondition = async index => {
  if (currentSearchCondition.index === index) {
    currentSearchCondition.arrow = currentSearchCondition.arrow === 'asc' ? 'desc' : 'asc'
  } else {
    currentSearchCondition.index = index
    currentSearchCondition.arrow = 'asc'
  }

  router.push({
    path: '/search/list',
    query: {
      searchName: route.query.searchName,
      order: currentSearchCondition.arrow,
      orderName: index === 0 ? 'none' : (index === 1 ? 'price' : (index === 2 ? 'sales_num' : ''))
    }
  })
}

watch(route, () => {
  let { order, orderName } = route.query
  currentSearchCondition.arrow = order || 'asc'
  currentSearchCondition.index = orderName === 'none' ? 0 : (orderName === 'price' ? 1 : (orderName === 'sales_num' ? 2 : 0))
})
</script>

<style lang="less" scoped>
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  >ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 15px;
    padding: 8px 0;

    li {
      display: flex;
      align-items: center;
      column-gap: 5px;

      .search-filter {
        display: flex;
        flex-direction: column;
        justify-content: center;

        i {
          font-size: 12px;
        }

        i:nth-of-type(1) {
          position: relative;
          top: 4px;
        }

        i:nth-of-type(2) {
          position: relative;
          bottom: 1px;
        }
      }
    }

    .active {
      color: #b0352f;
    }
  }

  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;

    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: auto;
      column-gap: 3px;
      row-gap: 3px;

      li {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        box-sizing: border-box;
        height: 245px;
        width: 186px;
        padding: 7px;
        padding-bottom: 3px;

        img {
          width: 170px;
          height: 170px;
        }

        h3 {
          font-size: 14px;
          color: #333;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .price {
          margin-top: auto;
          height: 40px;
          display: flex;
          align-items: center;
          font-size: 14px;

          span {
            color: #b0352f;
          }

          a {
            margin-left: auto;
            text-decoration: none;
            background-color: #b0352f;
            color: #fff;
            width: 65px;
            line-height: 25px;
            text-align: center;
            border-radius: 5px;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>